import React, { Component, } from 'react';
import { StyleSheet, Text, View, Linking} from 'react-native';
import BaseSelector from '../../app/selectors/base';
import * as BaseActions from '../../app/actions/base';
import connect from '../../app/store/connect';
import ListContainer from '../../components/List/list-container';
import { meConfig, } from './config/meConfig';
import Toast from '../../components/Toast';
import ModalDialog from '../../components/Dialog/ModalDialog';
import { getToken, saveToken, saveUserId, getPhone, savePhone, } from '../../commons/utils/passport';
import MeTopCard from './components/topcard';
import { formatTime } from '../../commons/utils/util';

const styles = StyleSheet.create({
  container:
   {
     flex: 1,
     paddingLeft: 15,
     paddingRight: 15,
     backgroundColor: '#FFFFFF',
   },
});

@connect(BaseSelector,  BaseActions)
export default class Me extends Component {
  static navigationOptions = {
    headerTitle: '我的',
  };

  onPress = (id) => {
    if (id === 'aboutUs') {
      this.props.navigation.navigate('AboutMe');
    } else if (id === 'service') {
      Linking.openURL('tel:'+ '18618163943');
    } else if (id === 'logout') {
      this.showDialog();
    } else if (id === 'Account') {
      const { logged } = this.props
      if(!logged) {
        this.props.navigation.navigate('Login');
      } else {
        this.props.navigation.navigate('Account');
      }
    }
  };

  onLoginPress = () => {
    this.props.navigation.navigate('Login');
  };
  
  onRegisterPress = () => {
    this.props.navigation.navigate('Reg');
  };

  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      isDialogVisible: false,
      phone: '',
    };
  }

  async componentWillMount() {
    const token = await getToken()
    this.props.actions.login({isLogin: token != null})
  }

  showDialog() {
    this.setState({ isDialogVisible: true, });
  }

  async logout(logout) {
    this.setState({ isDialogVisible: false, });
    if (logout) {
      await saveToken('');
      await saveUserId('');
      await savePhone('');
      this.setState({ phone: '', });
      this.props.actions.login({ isLogin: false, });
      this.props.actions.auth({ authed: false, });
      this.props.actions.openAccount({ hasOpenAccount: false, });
      Toast.show({ title: '您已退出登陆！', });
    }
  }

  async getPhone() {

    if(this.state.phone.length > 0) {
      return this.state.phone
    }

    const phone = await getPhone()
    const _phone = phone.substring(0,3) + '****' + phone.substring(7)
    this.setState({phone: _phone})   
  }

  render() {
    this.getPhone()
    const { logged } = this.props
    const time = formatTime(new Date())
    const _phone = this.state.phone || '尊敬的用户'
    const topCardInfo = {
      hasLogin: logged,
      phone: _phone,
      loginTime: time,
    };
    return (
      <View style={styles.container}>
        <MeTopCard dataSource={topCardInfo} onLoginPress={this.onLoginPress} onRegisterPress={this.onRegisterPress} ></MeTopCard>
        <ListContainer dataSource={meConfig} onPress={this.onPress} />
        <ModalDialog
          _dialogVisible={this.state.isDialogVisible}
          _dialogLeftBtnAction={() => { this.logout(false); }}
          _dialogRightBtnAction={() => { this.logout(true); }}
        />
      </View>
    );
  }
}
